<template>
  <div class="login">
    <div class="close">
      <!-- <van-icon name="cross" color="#3382EF" v-if="codeing ==0" /> -->
      <van-icon name="cross" color="#3382EF" v-if="codeing ==3" @click="codeing =0" />
      <van-icon name="arrow-left" color="#3382EF" v-if="codeing ==1 " @click="bakcNum" />
      <van-icon name="arrow-left" color="#3382EF" v-if="codeing ==2 " @click="bakcNum" />
    </div>
    <div class="content step_1" v-if="codeing ==0">
      <h4 class="title">欢迎登录巨服中国</h4>
      <div class="input_group">
        <div class="input_item van-hairline--bottom">
          <label for>+86</label>
          <input @blur="blur()" v-model="phone" type="tel" placeholder="请输入手机号" />
        </div>
        <!-- <p class="tips">未注册的手机号验证后自动创建账号</p> -->
      </div>
      <div class="btn" @click="getCode">获取短信验证码</div>
      <!-- <p class="switch" @click="codeing=3">密码登录</p> -->
    </div>

    <div class="content step_2" v-if="codeing == 1">
      <h4 class="title">请输入验证码</h4>
      <p class="tips">验证码已发送至+86{{phone}}</p>
      <!-- <div class="codes"> -->
      <!-- <input v-model.trim.number="input0" ref="input0" @keydown.8="deleteValue('input0','input0')" @keyup="changeValue($event,'input0','input1')" type="number" placeholder="">
            <input v-model.trim.number="input1" ref="input1" @keydown.8="deleteValue('input1','input0')" @keyup="changeValue($event,'input1','input2')" type="number" placeholder="">
            <input v-model.trim.number="input2" ref="input2" @keydown.8="deleteValue('input2','input1')" @keyup="changeValue($event,'input2','input3')" type="number" placeholder="">
      <input v-model.trim.number="input3" ref="input3" @keydown.8="deleteValue('input3','input2')" @keyup="changeValue($event,'input3','input3')" type="number" placeholder="">-->
      <van-field
        v-model.trim.number="input0"
        @input="changeauthCd"
        @blur="blur()"
        maxlength="4"
        type="number"
        placeholder="请输入验证码"
      />
      <!--  </div> -->
      <p class="tips">{{timer}}秒后重新获取验证码</p>
      <div class="btn" v-if="codeing==1" @click="subMit">登录</div>
    </div>

    <!-- <div class="content step_2" v-if="codeing == 2">
      <h5 class="title">请为你的账号设置一个新密码</h5>
      <div class="input_item van-hairline--bottom">
        <input v-model="password" type="text" v-if="showPwd" placeholder="请设置6～12位（数字+字母）">
        <input v-model="password" type="password" v-if="!showPwd" placeholder="请设置6～12位（数字+字母）">
        <label for="" class="icon_pwd">
          <van-icon name="closed-eye" v-if="showPwd" @click="showPwd=!showPwd" />
          <van-icon name="eye-o" v-if="!showPwd" @click="showPwd=!showPwd" />
        </label>
      </div>
      <div class="btn" @click="subMit">保存新密码</div>
    </div>-->

    <div class="content step_1" v-if="codeing == 3">
      <h4 class="title">欢迎登录巨服中国</h4>
      <div class="input_group">
        <div class="input_item van-hairline--bottom">
          <label for>+86</label>
          <input v-model="phone" type="text" placeholder="请输入手机号" />
        </div>
        <div class="input_item van-hairline--bottom">
          <input v-model="password" type="text" v-if="showPwd" placeholder="请输入密码" />
          <input v-model="password" type="password" v-if="!showPwd" placeholder="请输入密码" />
          <label for class="icon_pwd">
            <van-icon name="closed-eye" v-if="showPwd" @click="showPwd=!showPwd" />
            <van-icon name="eye-o" v-if="!showPwd" @click="showPwd=!showPwd" />
          </label>
        </div>
      </div>
      <div class="btn" @click="login">登录</div>
      <!-- <p class="switch">忘记密码</p> -->
    </div>
  </div>
</template>

<script>
import api from "api/api";
export default {
  data() {
    return {
      input0: "",
      input1: "",
      input2: "",
      input3: "",
      phone: "",
      codeing: 0,
      timer: 0,
      password: "",
      showPwd: false
    };
  },
  mounted() {
  	this.share()
  },
  methods: {
    getCode() {
      var that = this;
      if (this.timer > 0) {
        return;
      }
      api
        .sendCode({
          data: {
            cellPhone: this.phone,
            type: 2
          }
        })
        .then(res => {
          console.log(res);
          if (res.code == 200) {
            this.$toast("短信已发送");
            this.codeing = 1;
            this.timer = 60;
            var setTimer = setInterval(() => {
              this.timer--;
              if (this.timer == 0) {
                clearInterval(setTimer);
              }
            }, 1000);
          } else {
            this.$toast(res.msg);
          }
        });
    },
	share () {
	  var str = window.location.href
	  this.flag = str.search('share=') != -1
	  if (str.search('share=') != -1) {
	    var sharecode = str.split('share=')[1]
	    api.addUserShare({ id: sharecode }).then(res => {
	
	    })
	  }
	},
    blur() {
      setTimeout(function() {
        var scrollHeight =
          document.documentElement.scrollTop || document.body.scrollTop || 0;
        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      }, 100);
    },
    changeauthCd() {
      var str = this.input0+''
      console.log(str.length)
      if (str.length > 4) {
        this.input0 = Number(str.slice(0, 4)) ;
      }
      setTimeout(function() {
        var scrollHeight =
          document.documentElement.scrollTop || document.body.scrollTop || 0;
          window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      }, 100);
    },
    deleteValue(inputValue, previousItem) {
      // 键盘按下时$event，当前input，上一个input
      console.log(this[inputValue], this[previousItem]);
      if (this[inputValue].length > 0) {
        // 当前有值，清空之
        this[inputValue] = "";
      } else {
        // 当前没有值，光标跳转到上一个input，并清空该input值
        this.$nextTick(() => {
          this.$refs[previousItem].focus();
          this[previousItem] = "";
          this[inputValue] = "";
        });
      }
    },
    subMit() {
      console.log("11");
      if (this.input0 == "") {
        this.$toast("请输入正确的验证码");
        return;
      }
      api
        .login({
          data: {
            cellPhone: this.phone,
            // password: this.password,
            smsCode: this.input0,
            platform: "web"
          }
        })
        .then(res => {
          console.log(res);
          if (res.code == 200) {
            localStorage.setItem("userInfor", JSON.stringify(res.data));
            this.$router.push("/home");
          }
        });
    },
    login() {
      console.log("登录");
      api
        .login({
          data: {
            cellPhone: this.phone,
            password: this.password,
            platform: "web"
          }
        })
        .then(res => {
          localStorage.setItem("userInfor", JSON.stringify(res.data));
          this.$router.push("/home");
        });
    },
    bakcNum() {
      this.input0 = this.input1 = this.input2 = this.input3 = "";
      this.codeing = 0;
    }
  }
};
</script>

<style lang="scss">
.login {
  color: #111;
  .content {
    width: 5.56rem;
    margin: 0 auto;
    text-align: left;
  }
  .close {
    text-align: left;
    font-size: 0.46rem;
    padding: 0.2rem;
  }
  .title {
    font-size: 0.46rem;
    margin-top: 1.16rem;
    font-weight: normal;
  }
  .input_group {
    margin-top: 1.4rem;
  }
  .input_item {
    display: flex;
    align-items: center;
    padding: 0.4rem 0;
    label {
      font-size: 0.24rem;
      color: #348aff;
      margin-right: 0.4rem;
    }
    .icon_pwd {
      padding-top: 0.2rem;
      font-size: 0.36rem;
      line-height: 100%;
    }
    input {
      font-size: 0.32rem;
      flex: auto;
    }
  }
  .tips {
    font-size: 0.24rem;
    color: #999;
    margin-top: 0.19rem;
  }
  .switch {
    color: #348aff;
    font-size: 0.24rem;
  }
  .btn {
    width: 5.56rem;
    line-height: 0.91rem;
    background: linear-gradient(
      96deg,
      rgba(72, 143, 240, 1),
      rgba(51, 130, 239, 1)
    );
    border-radius: 0.45rem;
    font-size: 0.36rem;
    color: #fff;
    text-align: center;
    margin: 0.47rem 0;
  }
  .codes {
    padding: 0.2rem 0;
    display: flex;
    justify-content: space-between;
    margin: 0.8rem 0;
    input {
      width: 0.97rem;
      height: 0.97rem;
      text-align: center;
      border-bottom: 1px solid #111111;
      font-size: 0.36rem;
    }
  }
  /* 去掉input[type=number]浏览器默认的icon显示 */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    // chrome
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
  input {
    // 火狐
    -moz-appearance: textfield;
  }
}
</style>